<template>
  <div class="button-div__base">
    <transition name="rotate"
      ><i
        class="button-i__minus icon-remove_circle_outline verticle-middle"
        @click="minusEffect"
        v-if="count > 0"
      ></i
    ></transition>
    <div
      class="button_div_number verticle-middle"
      :class="{ 'opacity-transparent': count === 0 }"
    >
      {{ count }}
    </div>
    <i
      class="button-i__plus icon-add_circle verticle-middle"
      @click="addEffect"
    ></i>
  </div>
</template>
<script lang="ts">
import Vue from "vue";
import { storagePass } from "./../../common/util/storage";
import { computed, ref, Ref, defineComponent } from "@vue/composition-api";

export default defineComponent({
  props: {
    count: {
      type: Number,
      default: 0,
    },
  },
  setup(props) {
    // 添加效果函数
    const addEffect = function (this: Vue) {
      // 业务代码：传递添加物品时触发动画所需的位置
      const { x, y } = this.$el.getBoundingClientRect();
      storagePass("triggerAnimate", x, y);
      // 计算值
      const changeValue = props.count + 1 >= 99 ? 99 : props.count + 1; // 计数变量增加
      this.$emit("addItem", changeValue); // 向外派发添加物品事件
    };
    // 减少效果函数
    const minusEffect = function (this: Vue) {
      // 没有传入prop参数时才可以修改显式值
      const changeValue = props.count - 1 <= 0 ? 0 : props.count - 1; // 计数变量减少
      this.$emit("minusItem", changeValue); // 向外派发建少物品事件
    };
    return {
      // currCount,
      addEffect,
      minusEffect,
      // countP,
    };
  },
});
</script>
<style lang="stylus" scoped>
$button-lineheight = 24px;
$button-font-size = 24px;
$button-text-fontsize = 10px;
$button-white = white;
$button-blue = rgb(0, 160, 220);
$button-number-color = rgb(147, 153, 159);

.button-div__base {
  display: inline-block;
  line-height: $button-lineheight;

  .button-i__plus {
    display: inline-block;
    font-size: $button-font-size;
    color: $button-blue;
  }

  .button-i__minus {
    display: inline-block;
    font-size: $button-font-size;
    color: $button-blue;
  }

  .button_div_number {
    width: 24px;
    text-align: center;
    color: $button-number-color;
    font-size: $button-text-fontsize;
    display: inline-block;
    user-select: none;
  }

  .verticle-middle {
    vertical-align: middle;
  }

  .opacity-transparent {
    transition: opacity 0.2s ease-in;
    opacity: 0;
  }
}

// 动画部分-->用于transition组件
.rotate-enter-active {
  animation: rotate-in linear 0.5s;
}

.rotate-leave-active {
  animation: rotate-in linear 0.5s reverse;
}

// 旋转动画关键帧
@keyframes rotate-in {
  0% {
    opacity: 0;
    transform: translate3d(20px, 0, 0) rotate(180deg);
  }

  100% {
    opacity: 1;
    transform: translate3d(0px, 0, 0) rotate(360deg);
  }
}
</style>
